<template>
  <el-row v-loading="loading">
    <el-col :span="24">
      <question-edit ref="questionEdit" v-on:save-finished="searchQuestion"></question-edit>
      <el-row class="search-row">
        <el-col :span="12">
          <el-input placeholder="档案号/姓名" size="small" v-model="search.topicName">
            <el-button slot="append" icon="el-icon-search" @click="searchQuestion()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="handleCreateExercise()">新增</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table height="505px" :data="questionList" border size="mini" header-cell-class-name="header-row">
            <el-table-column prop="id" label="序号" header-align="center"></el-table-column>
            <el-table-column prop="topicName" label="题目名称" header-align="center"></el-table-column>
            <el-table-column prop="topicType" label="题目类型" header-align="center"></el-table-column>
            <el-table-column prop="applyGender" label="适用性别" header-align="center"></el-table-column>
            <el-table-column prop="whether" label="是否必填" header-align="center"></el-table-column>
            <el-table-column label="操作" header-align="center" align="center" width="260">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleEditquestion(scope.$index, scope.row)">编辑
                </el-button>
                <el-button type="danger" size="mini" @click="handleDeletequestion(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="1" :page-sizes="[5, 10, 15]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"
            :total="questionTotal">
          </el-pagination>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
  import questionEdit from '@/components/Lixueseng520/questionBankEdit'
  import { questionList, removeQuestion } from '@/api/Lixueseng520/questionBank'

  export default {
    data() {
      return {
        questionList: [],
        questionTotal: 0,
        search: {
          topicName: "",
          offset: 1,
          limit: 5
        },
        loading: true
      }
    },
    methods: {
      searchQuestion() {
        this.loading = true
        questionList(this.search)
          .then(response => {
            this.questionList = response.data.rows
            this.questionTotal = response.data.total
            this.loading = false
          })
          .catch(error => {
            this.outputError(error)
          })
      },
      //每页条数改变方法
      handleSizeChange(val) {
        this.search.limit = val;
        this.searchQuestion()
      },
      //当前页改变方法
      handleCurrentChange(val) {
        this.search.offset = val
        this.searchQuestion()
      },
      //添加按钮
      async handleCreateExercise() {
        this.loading = true
        try {
          //打开添加建议框
          this.$refs.questionEdit.$emit('openAddUserDialog')
          this.loading = false
          this.searchQuestion()
        } catch (error) {
          this.outputError(error)
        }
      },
      //编辑按钮
      async handleEditquestion(index, row) {
        this.loading = true
        try {
          //打开编辑建议框
          this.$refs.questionEdit.$emit('openEditUserDialog', row)
          this.loading = false
          this.searchQuestion()
        } catch (error) {
          this.outputError(error)
        }
      },
      //删除按钮操作
      handleDeletequestion(index, row) {
        this.$confirm('确定删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.loading = true
            removeQuestion(row.id)
              .then(response => {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                })
                this.loading = false
                this.searchQuestion()
              })
              .catch(error => {
                this.outputError(error)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      // 初始化
      async pageInit() {
        this.searchQuestion()
      },
      outputError(error) {
        console.log(error.response ? error.response : error.message)
        this.loading = false
        this.$message({
          showClose: true,
          message: '出错了，请按F12查看浏览器日志。',
          type: 'error'
        })
      }
    },
    //组件
    components: { questionEdit },
    created() {
      //调用初始化
      this.pageInit()
    }
  }
</script>

<style lang="scss" scoped>
  .search-row {
    padding-bottom: 8px;
  }

  .el-input {
    width: 260px;
  }
</style>
